import React, {useState} from 'react';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import {Button, Checkbox, Form, Input, message} from 'antd';
import styles from "./index.module.less";
import {useNavigate} from "react-router-dom";
import store from "@/store";
import {postLogin} from "@/api/auth";
import {useDispatch, useSelector} from "react-redux";
import {changeLoading, postLoginAsync, postLoginAsync2, upToken, useSelectorAuth} from "@/store/slices/auth";
import {authRequest} from "@/request";
import {useAppDispatch} from "@/hooks";
const Login: React.FC = () => {
    const navigate = useNavigate();
    // 获取数据状态1
    // console.log(store.getState());// {auth:{loading:false}}

    // 获取数据状态2: useSelector接收一个回调函数，回调函数返回的值即是useSelector返回的值
    //             回调函数接收的参数即是数据状态
    // const result =  useSelector(state=>{
    //     console.log(state);// {auth:{loading:false}}
    // });
    // console.log(result);//


    // 获取loading
    // type TAuth = {
    //     auth:{
    //         loading:boolean
    //     }
    // }
    // const {loading} = useSelector((state:TAuth)=>state.auth);
    // console.log(loading);

    // 获取数据状态3：封装方法
    const {loading} = useSelectorAuth();
    console.log(loading);

    // 1- 通过useDispatch生成dispatch
    // type TDispatch = typeof store.dispatch;
    // const dispatch = useDispatch<TDispatch>();

    // 2- 将以上代码封装成自定义的hooks
    const dispatch = useAppDispatch();
    return (
        <div className={styles.login}>
            <div>
                <h1>尚医通管理系统</h1>
                <Form
                    name="normal_login"
                    className="login-form"
                    initialValues={{ remember: true }}
                    onFinish={async (values:any)=>{
                        // dispatch接收的参数可以称为action.
                        // action分为同步action(对象),异步action（函数）
                        // 1
                        // store.dispatch(async function(dispatch,getState){
                        //     console.log(getState())// 获取redux仓库中的数据状态
                        //     try{
                        //         dispatch(changeLoading(true));
                        //         const result:any = await postLogin(values);
                        //         message.success(result.message);
                        //         dispatch(changeLoading(false));
                        //         dispatch(upToken(result.data.token));
                        //         navigate("/")
                        //     }catch (err){
                        //         dispatch(changeLoading(false));
                        //     }
                        //
                        // })

                        // 2
                        // async function postLoginAsync(dispatch:any,getState:any){
                        //     console.log(getState())// 获取redux仓库中的数据状态
                        //     try{
                        //         dispatch(changeLoading(true));
                        //         const result:any = await postLogin(values);
                        //         message.success(result.message);
                        //         dispatch(changeLoading(false));
                        //         dispatch(upToken(result.data.token));
                        //         navigate("/")
                        //     }catch (err){
                        //         dispatch(changeLoading(false));
                        //     }
                        //
                        // }
                        // store.dispatch(postLoginAsync)


                        // 3
                        // await store.dispatch(postLoginAsync({
                        //     values,
                        //     navigate
                        // }));

                        // 4
                        // await dispatch(postLoginAsync({values,navigate}));


                        // 5- 扩展
                        await dispatch(postLoginAsync2({values,navigate}));

                    }}
                >
                    <Form.Item
                        name="username"
                        rules={[{ required: true, message: '请输入管理员账号!' }]}
                    >
                        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="管理员账号" />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[{ required: true, message: '请输入管理员密码' }]}
                    >
                        <Input
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                            placeholder="管理员密码"
                        />
                    </Form.Item>

                    <Form.Item>
                        <Button loading={loading}  type="primary" htmlType="submit" className="login-form-button">
                            登陆
                        </Button>
                    </Form.Item>
                </Form>
            </div>

        </div>

    );
};

export default Login;